<template>
    <div class="note">
        <label>
            <span>备注</span>
            <input type="text" v-model="value" placeholder="在这里添加备注">
        </label>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component,Watch} from 'vue-property-decorator';
    @Component
    export default class Note extends Vue{
        value="";

        @Watch('value')
        onValueChanged(value:string){
            this.$emit('update:value',value);
        }

    }
</script>

<style lang="scss" scoped>
    .note {
        font-size: 16px;
        margin-top:10px;
        background-color: #FFF4DD;
        padding:15px 0;
        label {
            font-size: 16px;
            display: flex;
            span {
                font-size: inherit;
                padding:0 18px;
            }
            input {
                color:#D7D7D7;
                font-size: inherit;
            }
        }
    }
</style>